<template>
  <div class="detail">
    <h3 class="detail-title">{{ detailsObj.data.title }}</h3>
    <div class="detail-edit">
      <div class="edit-left">
        <p class="release">
          发布于{{ detailsObj.data.last_reply_at }}，已有{{ detailsObj.data.visit_count }}次阅读
        </p>
        <div class="release ifont">
          <i class="el-icon-edit" v-if="isShow" @click="editOrInsert"></i>
          <i class="el-icon-delete" v-if="isShow" @click="deleDig"></i>
        </div>
      </div>
      <el-button
        class="collect"
        @click="collected = !collected"
        :type="collected ? 'info' : 'success'"
        >{{ collected ? '取消收藏' : '收藏' }}</el-button
      >
    </div>
    <hr />
    <div v-html="detailsObj.data.content"></div>

    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <span>确认删除？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteColumn">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// import { useRouter } from 'vue-router'
//数据详情模块
import { handleDetails } from '@/modules/cnode/handleDetails'
export default {
  setup() {
    let { detailsObj, isShow, dialogVisible, collected, editOrInsert, deleDig, deleteColumn } =
      handleDetails()
    return {
      detailsObj,
      isShow,
      dialogVisible,
      collected,
      editOrInsert,
      deleDig,
      deleteColumn,
    }
  },
}
</script>
<style lang="scss" >
.detail {
  position: relative;
  overflow: hidden;
  padding: 30px 60px;
  color: #707070;
  white-space: pre-wrap;
  word-break: break-all;
  .detail-title {
    text-align: center;
  }
  img {
    width: 200px !important;
    height: 200px !important;
    display: block !important;
  }

  .detail-edit {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .release {
    margin: 10px;
    font-size: 12px;
  }
  .ifont {
    width: 50px;
    display: flex;
    & > i {
      font-size: 16px;
      margin-right: 20px;
    }
  }
}
</style>